<template>
  <div class="body">
    <el-form class="search-form" />
    <el-table
      :data="dataList"
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        prop="productName"
        label="产品名"
      />
      <el-table-column
        prop="productDesc"
        label="产品描述"
      />
      <el-table-column
        prop="receiveName"
        label="收货人"
      >
        <template #default="scope">
          <el-image style="width:100px;height:80px;object-fit: cover;" :src="scope.row.productPicture" />
        </template>
      </el-table-column>
      <el-table-column
        prop="productPrice"
        label="产品价格"
      />
      <el-table-column
        prop="gmtCreate"
        label="收藏时间"
      />
      <el-table-column
        label="操作"
        width="200px"
      >
        <template #default="scope">
          <el-button
            type="primary"
            @click="goProductDetail(scope.row.productId)"
          >查看</el-button>
          <el-button
            type="danger"
            @click="deleteHandle(scope.row.collectionId)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      layout="prev, pager, next, jumper,total"
      :total="total"
      :current-page="pageNum"
      style="margin-top:15px"
      @size-change="pageSizeChange"
      @current-change="pageChange"
    />
  </div>
</template>

<script>
import { getPageCollectionByUserId, deleteCollection } from '@/api/mall/collections'
export default {
  data() {
    return {
      dataList: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      searchForm: {
        flag: '',
        originPlace: '',
        name: ''
      },
      seleteList: []
    }
  },
  mounted() {
    this.load()
  },
  methods: {
    load() {
      this.$getUserId().then(async(userId) => {
        const res = await getPageCollectionByUserId({
          userId: userId,
          pageNum: this.pageNum,
          pageSize: this.pageSize
        })
        this.dataList = res.data.records
        this.total = res.data.total
        console.log(this.dataList)
      })
    },
    pageChange(page) {
      this.pageNum = page
      this.load()
    },
    pageSizeChange(size) {
      this.pageSize = size
      this.load()
    },
    handleSelectionChange(rows) {
      this.seleteList = rows
    },
    openForm(id) {
      this.$refs.form.init(id)
    },
    deleteHandle(id) {
      this.$confirm(
        '确定要删除吗？',
        'Warning',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        if (id) {
          console.log(id)
          this.delete(deleteCollection, id)
        } else {
          let ids = ''
          this.seleteList.forEach(item => {
            ids += item.id + ','
          })
          this.delete(deleteCollection, ids)
        }
      })
        .catch(() => { })
    },
    delete(operation, param) {
      operation(param).then(() => {
        this.load()
        this.$message({
          type: 'success',
          message: '操作成功'
        })
      }).catch(() => {
        this.$message({
          type: 'danger',
          message: '操作失败'
        })
      })
    },
    goProductDetail(productId) {
      this.$router.push(`/productDetail?productId=${productId}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.body {
  width: 150%;
}

.search-form {
  margin: 10px 0;
  padding: 0 10px;
  display: flex;
  .el-form-item {
    margin-right: 20px;
  }
}
.operations {
  padding: 0 10px;
}
</style>
